Vue.component('blog-post',{
    props:['postTitle'],
    template:'<h3>{{ postTitle }}</h3>'
})
new Vue({
    el:'blog-post'
})

new Vue({
    el:'blog-post',
    post:{
        id:1,
        title:'My Journey with Vue'
    }
})

// props:['initialCounter'],
// data: function(){
//     return{
//         counter: this.initialCounter
//     }
// }
// 这个 prop 用来传递一个初始值；
// 这个子组件接下来希望将其作为一个本地的 prop 数据来使用。

// props: ['size'],
// computed:{
//     normalizedSize: function(){
//         return this.size.trim().toLowerCase();
//     }
// }
// 这个 prop 以一种原始的值传入且需要进行转换

// Prop验证
Vue.component('my-component',{
    propA:Number,
    propB:[String,Number],
    propC:{
        type:String,
        required:true
    },
    propD:{
        type:Number,
        default:100
    },
    propE:{
        type:Object,
        default:function(){
            return { message: 'hello'}
        }
    },
    // 自定义函数
    propF:{
        validator:function(value){
            return['success', 'warning', 'danger'],indexOf(value) !== -1
        }
    }
})

Vue.component('base-input',{
    inheriaAttrs:false,
    props:['label','value'],
    template:`
    <label>
        {{ label }}
    <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
    >
    </label>
    `
})
